<!-- <h1>会员详情</h1> -->
<script setup lang='ts'>
import { reactive, toRefs, ref, markRaw,computed,onMounted,watchEffect } from "vue";
import { ElMessageBox } from "element-plus";
import { Delete, CircleCheck, WarningFilled } from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
import userManagementStore from "../../store/userManagement";
import userManagementHooks from "../../hooks/userManagement";
import { number } from "echarts";

const route = useRoute();//路由
const store = userManagementStore();

const id = ref<number>();//传入id


const userData = ref([]);//用户数据
const MembershipCardInformation = ref([]);// 会员卡信息
const addresList = ref([]);// 收货地址

const login = ()=>{
  let userId:number = id
  console.log("用户id",userId);
  userManagementHooks.getUserCardInfoByUserId(userId)
  

}




// 头像
// const state = reactive({
//   url: ,
// });
// const { url } = toRefs(state);

onMounted(() => {
  // 页面加载完成后执行的函数
  // console.log(route.query.id);
  console.log("会员卡表单数据", MembershipCardInformation);
  console.log("用户表单id", id);
  login()
});



</script>
<!-- 模型 -->
<template>
  <div class="">
    <!-- 返回 -->
    <el-row class="mb-4">
      <router-link to="/MembershipList">
      <el-col :span="24">
        <el-button plain class="return"> &lt; 返回</el-button>
      </el-col>
      </router-link>
    </el-row>
    <!-- 个人信息 -->
    <div class="userManage">
      <el-container>
        <el-aside width="20%" class="m0p0">
          <div class="image textAlign">
            <el-avatar shape="circle" :size="120" fit="cover" :src="userData.photo" />
          </div>
          <div class="textAlign">
            <span>{{ userData.phone }}</span>
          </div>
        </el-aside>
        <el-main class="m0p0">
          <el-row>
            <el-col :span="4"><div class="deep">姓名</div></el-col>
            <el-col :span="8"><div class="next">{{userData.id}}</div></el-col>
            <el-col :span="4"><div class="deep">擅长</div></el-col>
            <el-col :span="8"><div class="next">{{userData.createTime}}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="4"><div class="deep">电话</div></el-col>
            <el-col :span="8"><div class="next">{{userData.nickname}}</div></el-col>
            <el-col :span="4"><div class="deep">所属场馆</div></el-col>
            <el-col :span="8"><div class="next">{{userData.birthday}}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="4"><div class="deep">性别</div></el-col>
            <el-col :span="8"><div class="next">{{userData.gender}}</div></el-col>
            <el-col :span="4"><div class="deep">创建时间</div></el-col>
            <el-col :span="8"><div class="next">{{userData.occupation}}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="4"><div class="deep">角色</div></el-col>
            <el-col :span="8"><div class="next">{{userData.phone}}</div></el-col>
            <el-col :span="4"><div class="deep"></div></el-col>
            <el-col :span="8"><div class="next"></div></el-col>
          </el-row>
          <el-row>
            <el-col :span="4"><div class="deep">从业时间</div></el-col>
            <el-col :span="8"><div class="next">{{userData.city}}</div></el-col>
            <el-col :span="4"><div class="deep"></div></el-col>
            <el-col :span="8"><div class="next"></div></el-col>
          </el-row>
        </el-main>
      </el-container>
    </div>

    <!-- 统计信息 -->
    <div>
      <div>会员卡信息</div>
      <el-table
        :data="MembershipCardInformation"
        style="width: 100%"
        table-layout="fixed"
        border
      >
        <el-table-column prop="cardName" label="会员卡" />
        <el-table-column prop="amountReceived" label="余额" />
        <el-table-column prop="cardStatus" label="状态" >
          <template #default="{ row }">
            <el-tag class="ml-2" :type="row.cardStatus == 0 ? '' : 'danger'">{{
              row.cardStatus == 0 ? "正常" : "禁用"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
          <el-button text type="primary" @click="dialogTableVisible = true "
            >明细</el-button
          >
          <el-button text type="primary" @click="open">停用</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped lang="less">
.return {
  float: right;
}
.userManage {
  height: 300px;
  //   border: 1px solid red;
  margin-top: 10px;
  .image {
    // border: 1px solid red;
  }
}
.textAlign {
  text-align: center;
}
.deep {
  height: 45px;
  line-height: 45px;
  padding-left: 20px;
  background-color: #f9fafd;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
}
.next {
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  height: 45px;
  line-height: 45px;
  padding-left: 20px;
}
.m0p0 {
  margin: 0;
  padding: 0;
}
</style>